<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--by qikran-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="资源类型">
    <meta name="description" content="资源类型">
    <link rel="shortcut icon" href="../../static/favicon.ico"
          th:href="@{/static/favicon.ico}">
    <link href="../../static/css/bootstrap.min.css?v=3.3.6"
          rel="stylesheet"
          th:href="@{/static/css/bootstrap.min.css (v='3.3.6')}">
    <link href="../../static/css/font-awesome.css?v=4.4.0"
          rel="stylesheet"
          th:href="@{/static/css/font-awesome.css (v='4.4.0')}">
    <link href="../../static/css/plugins/bootstrap-table/bootstrap-table.min.css"
          rel="stylesheet"
          th:href="@{/static/css/plugins/bootstrap-table/bootstrap-table.min.css}">
    <link href="../../static/css/animate.css"
          rel="stylesheet"
          th:href="@{/static/css/animate.css}">
    <link href="../../static/css/style.css?v=4.1.0"
          rel="stylesheet"
          th:href="@{/static/css/style.css (v='4.1.0')}">
    <!-- Sweet Alert -->
    <link href="../../static/css/plugins/sweetalert/sweetalert.css"
          rel="stylesheet"
          th:href="@{/static/css/plugins/sweetalert/sweetalert.css}">
    <!--tree-->
    <link href="../../static/css/plugins/treeview/bootstrap-treeview.css"
          rel="stylesheet"
          th:href="@{/static/css/plugins/treeview/bootstrap-treeview.css}">
    <title>资源类型</title>
</head>
<style type="text/css">
    .table > thead > tr > th    {
        color: #2a62bc;
    }
    ul {
        list-style-type: none;
    }
</style>
<body class="gray-bg">
<div class="ibox-content">
    <div class="row">
        <div class="col-sm-12">
            <div class=" animated fadeInRight">
                <div id="toolbar">
                    <button class="btn btn-success" data-toggle="modal" data-target="#model_add">添加</button>
                    <button class="btn btn-danger" id="delAll">删除</button>
                </div>

                <div class="example-wrap">
                    <div class="example">
                        <table id="actionListTable">

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--添加模态窗-->
<div class="modal fade" id="model_add" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- 模态框头部定义 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增</h4>
            </div>
            <!--体部定义-->
            <div class="modal-body">
                <!-- 表单定义 -->
                <form th:action="@{/resources/resourceType/addResourceType}" id="addForm" method="post" class="form-horizontal">
                    <div class="form-group  has-feedback">
                        <label class="col-md-2 control-label">类型名称:</label>
                        <div class="col-md-6">
                            <input type="text" name="typeName" class="form-control" id="add_typeName">
                        </div>
                    </div>
                    <div class="form-group  has-feedback">
                        <label class="col-md-2 control-label ">资源描述:</label>
                        <div class="col-md-6">
                            <textarea name="typeDesc" class="form-control" rows="3" id="add_typeDesc"></textarea>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" id="model_add_btn" class="btn btn-primary">添加</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- 全局js -->
<script src="../../static/js/jquery.min.js?v=2.1.4"
        th:src="@{/static/js/jquery.min.js}"></script>
<script src="../../static/js/bootstrap.min.js?v=3.3.6"
        th:src="@{/static/js/bootstrap.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script src="../../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
        th:src="@{/static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<!-- Sweet alert -->
<script src="../../static/js/plugins/sweetalert/sweetalert.min.js"
        th:src="@{/static/js/plugins/sweetalert/sweetalert.min.js}"></script>

<!--自定义js---表格操作-->
<!-- 主要用于表格的删除按钮功能实现 -->
<script src="../../static/public/exam/tableOperation.js"
        th:src="@{/static/public/exam/tableOperation.js}"></script>


<script type="text/javascript" th:inline="javascript">
    $(function () {
        /*init角色管理表*/
        var $actionListTable = $("#actionListTable");

        /* 后台数据渲染前段表格 */
        $actionListTable.bootstrapTable({
            url: '/owep/resources/resourceType/getResourceType',
            method: "post",
            toolbar: '#toolbar',
            mobileResponsive: true,
            striped: true,
            pagination: true,
            height: 550,
            sidePagination: "client",
            pageList: "[10,20,50,100]",
            pageSize: 10,
            iconSize: "outline",
            search: true,
            showSearchButton: true,
            searchFields: "groupName",
            toolbarAlign: "right",
            searchAlign: "left",
            columns: [
                {
                    checkbox: true
                }, {
                    field: 'typeName',
                    title: '资源管理',
                    align: 'center',
                },
                {
                    field: 'typeDesc',
                    title: '资源描述',
                    align: 'center',
                }, {
                    field: 'operator',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    width: '200px',
                    formatter: addFunctionAlty, /* 表格中增加按钮 */
                    events: {
                        'click button[title=删除]': function (e, value, row, index) {//动态嵌入按键：删除
                            deleteRecord(e, value, row, index, "/owep/resources/resourceType/deleteResourceType", '#actionListTable');
                        },
                    }
                }

            ],
        });

        /* 表格中增加按钮 */
        function addFunctionAlty(value, row, index) {
            return [
                '<button class="btn btn-white btn-sm" value="' + row.id + '" type="button" data-toggle="tooltip" data-placement="bottom" title="删除"><i class="glyphicon glyphicon-trash text-danger"/></button>',
            ].join('');
        }

        /*添加提交表单*/
        var model_add_btn = $('#model_add_btn');
        model_add_btn.click(function () {
            // console.log("add submit btn");
            var typeName = $("#add_typeName").val();
            var typeDesc = $("#add_typeDesc").val();

            console.log("typeName = "+typeName);
            console.log("typeDesc = "+typeDesc);

            var typeData ={
                typeName:typeName,
                typeDesc:typeDesc,
            };
            $.ajax({
                method:"post",
                url:"/owep/resources/resourceType/addResourceType",
                async: "true",
                data:typeData,
                dataType:"text",
                //contentType:"application/json",
                success:function(data){
                    //alert(data);
                    window.location.reload();
                },
                error: function (jqXRH) {
                    console.log(jqXRH);
                    alert("添加未成功")
                }
            });
        });

        /*绑定批量删除按钮*/
        $("#delAll").click(function () {
            var idlist = $actionListTable.bootstrapTable('getAllSelections');
            var ids = JSON.stringify(idlist);
            if (idlist.length === 0) {
                alert("请至少选择一个")
            } else {
                if (confirm("确定删除这些数据么")) {
                    //alert("删除:" + ids);
                   /* window.location.reload();*/
                    //ajax发送异步请求
                    $.ajax({
                        url:  "/owep/resources/resourceType/deleteSelectResourceType",
                        method: "post",
                        data: ids,
                        dataType: "text",
                        async: "true",
                        contentType: "application/json",
                        success: function (data) {
                            /*重新加载本页面*/
                            window.location.reload();
                        },
                        error: function (jqXRH) {
                            console.log(jqXRH);
                            alert("删除失败")
                        }
                    })
                }
            }
        });
    });
</script>

</body>

</html>